<template>
  <div class="mapbj">
    <img src="@/assets/img/home/yongjia.png" usemap="#Map" border="0" style="width: 34.6875rem; height: 35.75rem;" />
    <map name="Map" id="Map">
      <!-- 岩坦镇 -->
      <div class="yantan map_icon"  @click="switchMaptwo(1,'岩坦镇','330324110000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="98,90,98,48,110,30,153,25,169,49,182,57,212,63,231,77,253,76,279,39,305,17,344,14,378,9,405,29,419,65,449,110,437,121,389,137,363,147,350,162,341,196,326,207,312,207,238,186,232,189,220,179,207,140,196,123,182,123,174,128,165,141,147,140,132,119"
        />
      </div>
      <!-- 巽宅镇 -->
      <div class="xunzhai map_icon" @click="switchMaptwo(2,'巽宅镇','330324107000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="93,90,115,109,139,141,148,145,143,154,131,158,125,181,129,198,159,235,156,259,146,273,127,284,81,302,57,286,41,250,21,217,8,172,18,166,38,173,47,163,49,133,59,135,71,118,78,112,84,104"
        />
      </div>

      <!-- 碧莲镇 -->
      <div class="bilian map_icon" @click="switchMaptwo(3,'碧莲镇','330324106000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="185,126,199,135,211,152,212,178,225,192,232,199,225,207,220,217,236,248,232,251,243,270,237,301,226,307,203,315,185,307,180,282,172,269,153,269,161,257,162,241,138,208,127,190,132,166,144,156,154,144,166,142,176,130"
        />
      </div>
      <!-- 岩头镇 -->
      <div class="yantou map_icon" @click="switchMaptwo(4,'岩头镇','330324108000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="234,192,239,202,233,207,225,220,236,239,246,250,268,257,290,269,332,315,342,320,350,317,354,299,357,259,381,216,406,183,427,158,439,145,446,133,449,121,445,116,427,125,366,148,354,164,346,188,335,204,319,213,245,193"
        />
      </div>
      <!-- 鹤盛镇 -->
      <div class="hesheng map_icon" @click="switchMaptwo(5,'鹤盛镇','330324112000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="378,247,413,189,444,156,454,145,464,118,474,124,510,107,523,102,555,138,550,160,538,180,555,215,555,243,541,274,533,278,509,264,495,262,486,265,467,258,429,248,399,248"
        />
      </div>

      <!-- 枫林镇 -->
      <div class="fenglin map_icon" @click="switchMaptwo(6,'枫林镇','330324109000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="357,313,356,285,364,265,374,253,396,250,412,254,429,262,451,264,471,270,475,284,468,290,438,296,407,296,393,304,370,316" />
      </div>
      <!-- 沙头镇 -->
      <div class="shatou map_icon" @click="switchMaptwo(7,'沙头镇','330324111000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="474,291,476,308,487,347,451,364,426,377,412,386,381,410,355,407,340,391,334,369,310,338,311,318,326,307,337,325,354,329,357,317,371,323,388,309,403,303,442,303"
        />
      </div>
      <!-- 大若岩镇 -->
      <div class="daruo map_icon" @click="switchMaptwo(8,'大若岩镇','330324105000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="309,343,292,344,270,355,254,361,242,357,244,338,231,325,219,317,239,303,247,290,249,275,239,255,247,255,261,256,290,272,297,283,321,305,314,314,311,317,309,332"
        />
      </div>
      <!-- 桥下镇 -->
      <div class="qiaoxia map_icon" @click="switchMaptwo(9,'桥下镇','330324104000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="83,303,112,297,141,287,163,271,179,277,181,294,189,310,204,317,222,317,238,331,240,348,245,364,260,369,260,396,251,424,255,449,275,470,267,482,243,498,233,491,223,464,206,443,186,438,182,418,169,384,142,359,115,352,107,344,89,316"
        />
      </div>
      <!-- 桥头镇 -->
      <div class="qiaotou map_icon" @click="switchMaptwo(10,'桥头镇','330324102000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="103,356,136,361,151,371,169,394,176,409,185,434,153,430,118,418,98,405,83,386" />
      </div>
      <!-- 北城街道 -->
      <div class="chengbei map_icon" @click="switchMaptwo(11,'北城街道','330324002000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="260,358,295,346,311,343,331,372,340,393,319,403,327,418,315,424,284,417,265,402,269,385" />
      </div>
      <!-- 南城街道 -->
      <div class="chengnan map_icon" @click="switchMaptwo(12,'南城街道','330324003000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="269,414,298,427,316,435,332,427,375,457,367,475,354,467,341,464,333,457,315,456,293,468,285,475,264,453,254,434,262,413" />
      </div>
      <!-- 东城街道 -->
      <div class="chengdong map_icon" @click="switchMaptwo(13,'东城街道','330324001000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="485,354,476,388,464,405,452,436,433,432,386,452,371,447,342,428,326,413,341,404,358,411,375,412,406,393,439,374,469,361" />
      </div>
      <!-- 乌牛街道 -->
      <div class="wuniu map_icon" @click="switchMaptwo(14,'乌牛街道','330324008000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="451,441,424,479,421,505,418,539,403,557,393,562,376,554,371,527,372,511,367,495,374,479,381,461,399,447,427,437" />
      </div>
      <!-- 三江街道 -->
      <div class="sanjiang map_icon" @click="switchMaptwo(15,'三江街道','330324006000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="371,552,367,536,361,509,365,491,361,477,349,471,337,471,328,480,331,497,335,509,327,523,306,537,302,540,336,548" />
      </div>
      <!-- 黄田街道 -->
      <div class="huangtian map_icon" @click="switchMaptwo(16,'黄田街道','330324007000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="266,511,277,482,284,472,312,461,321,460,335,466,326,479,323,491,330,504,327,520,309,530,296,527,286,521" />
      </div>
      <!-- 三江街道 -->
      <div class="jiangbei map_icon" @click="switchMaptwo(17,'三江街道','330324006000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="251,541,260,518,278,519,288,527,302,532,299,539,289,544,263,544" />
      </div>
      <!-- 瓯北街道 -->
      <div class="dongou map_icon" @click="switchMaptwo(18,'瓯北街道','330324009000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="238,502,256,494,273,485,269,504,258,515,253,526,248,532,238,526" />
      </div>
    </map>
  </div>
</template>

<script>
export default {
  name: 'MapYongJia',

  data () {
    return {
      qxname: '永嘉县',
      category: false,
      isActive: 1,
      cityThreeType: '8',
      cityThreeTitle: '',
      Hqlrsl: [],
      qxcode: '330324000000'
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 12.获取老人数量(会按照地区自动分类
      this.$http.post(this.$api.Hqlrsl.hqlrsl, this.qxcode, true).then(result => {
        let arr = result.data.response.countTotalRegionDoctor
        // console.log('12.获取老人数量(会按照地区自动分类)', arr)
        for (let val of arr.values()) {
          this.Hqlrsl.push(val.num)
        }
      })
    },
    switchMaptwo (cityThreeType, cityThreeName, cityThreeJdCode) {
      var _this = this
      setTimeout(function () {
        console.log('cityThreeType(Map)' + cityThreeType)
        console.log('cityThreeName(Map)' + cityThreeName)
        _this.$router.push({
          path: '/AreaThreeComponents',
          name: 'AreaThreeComponents',
          query: {
            key: 'key',
            cityThreeTypeKey: cityThreeType,
            cityThreeTitleKey: cityThreeName,
            cityThreeJdCodeKey: cityThreeJdCode,
            cityThreeQxcodeKey: _this.qxcode,
            cityThreeQxnameKey: _this.qxname

          }
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
//地图
.mapbj {
  position: absolute;
  top: 8.5%;
  left: 30%;
  //地图点
  .map_icon {
    color: #214494;
    font-style: italic;:hover{color: #fff;
font-size: 1.375rem; }
    width: 7rem;
    height: 7rem;
    line-height: 2.4rem;
    text-align: center;
    background: url(../../../assets/img/home/2.png) no-repeat center;
    background-size: 100% 100%;
  }
}
.yantan {
  position: absolute;
  top: 0;
  left: 35%;
}
.xunzhai {
  position: absolute;
  top: 20%;
  left: 0%;
}
.bilian {
  position: absolute;
  top: 18%;
  left: 22%;
}
.yantou {
  position: absolute;
  top: 22%;
  left: 45%;
}
.hesheng {
  position: absolute;
  top: 15%;
  right: 3%;
}
.fenglin {
  position: absolute;
  top: 32%;
  left: 62%;
}
.daruo {
  position: absolute;
  top: 38%;
  left: 38%;
}
.qiaoxia {
  position: absolute;
  top: 44%;
  left: 21.5%;
}
.qiaotou {
  position: absolute;
  top: 52%;
  left: 10.5%;
}
.beicheng {
  position: absolute;
  top: 41.5%;
  left: 34.5%;
}
.shatou {
  position: absolute;
  top: 48%;
  right: 20%;
}
.chengbei {
  position: absolute;
  top: 52%;
  right: 35%;
}
.chengnan {
  position: absolute;
  top: 62%;
  right: 35%;
}
.chengdong {
  position: absolute;
  top: 55%;
  right: 11%;
}
.wuniu {
  position: absolute;
  top: 67%;
  right: 16%;
}

.dongou {
  position: absolute;
  top: 73%;
  left: 31%;
}
.huangtian {
  position: absolute;
  top: 71%;
  left: 43%;
}
.sanjiang {
  position: absolute;
  top: 76%;
  right: 28%;
}
.jiangbei {
  position: absolute;
  top: 77%;
  left: 39%;
}
</style>
